<template >
  <div class="way-ans">
    <el-tooltip class="item" effect="dark" :content="$t('cti.noConnectInternet')" placement="bottom" v-show="getFirstExtenType === 'sip'">
      <div class="first-status" data-v-7moor>
        <span class="name-status fr" data-v-7moor>{{$t('cti.softPhone')}}{{statusRelay}}</span>
        <span class="fr" style="margin-top: 11px;">
          <i class="icon iconfont icon-ermai"></i>
        </span>
      </div>
    </el-tooltip>
    <div v-show="getFirstExtenType !== 'sip'">
      <el-tooltip class="item" effect="dark"  :content="$t('cti.noConnectInternet')" placement="bottom" v-show="type=='sip'||type=='gateway'">
        <el-dropdown @command="changeLoginType" trigger="click" data-v-7moor size="small">
          <span>
            <span class="name-status fr" data-v-7moor>{{extenTypeInfo}}{{statusRelay}}<i class="el-icon-arrow-down el-icon--right"></i></span>
            <span class="fr" style="margin-top: 11px;">
              <i class="icon iconfont icon-ermai"></i>
            </span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-show="hideCurrentExtenType.gateway" command="gateway">{{$t('cti.wayOfSip')}}</el-dropdown-item>
            <el-dropdown-item v-show="hideCurrentExtenType.sip" command="sip">{{$t('cti.wayOfBar')}}</el-dropdown-item>
            <el-dropdown-item v-show="hideCurrentExtenType.Local" command="Local">{{$t('cti.wayOfPhone')}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-tooltip>
      <el-dropdown  @command="changeLoginType" trigger="click" v-show="type ==='Local'" data-v-7moor size="small">
        <span class="name-status" data-v-7moor>{{extenTypeInfo}}{{statusRelay}}<i class="el-icon-arrow-down el-icon--right"></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-show="hideCurrentExtenType.gateway" command="gateway">{{$t('cti.wayOfSip')}}</el-dropdown-item>
          <el-dropdown-item v-show="hideCurrentExtenType.sip" command="sip">{{$t('cti.wayOfBar')}}</el-dropdown-item>
          <el-dropdown-item v-show="hideCurrentExtenType.Local" command="Local">{{$t('cti.wayOfPhone')}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
  // 此组件为电话条切换登录方式（注意：sip(在线客服)登录方式不能切换，其他方式登录的可以切换）
  export default {
    name: 'WaysOfAnswer',
    data () {
      return {
        type: '',
        statusRelay: ''
      }
    },
    watch: {
      peersChange () {
        let data = this.getStatusRelay()
        this.statusRelay = data
      }
    },
    computed: {
      peersChange () {
        return this.$store.state.monitor.agentStateChange.randomBar
      },
      getFirstExtenType () {
        let loginData = JSON.parse(window.sessionStorage.getItem('loginData'))
        if (loginData) {
          this.type = loginData.extenType
          return loginData.extenType // 获取初始化登录方式，若为软电话，则不能再切换
        }
      },
      extenTypeInfo () { // 当前登录方式的显示文案，若是手机方式登录直接展示手机号
        let extenType = this.$store.state.cti.globalLet._cti_extenType
        this.type = extenType
        if (!extenType) { // 解决手机方式登录，状态服务器注册不上时，取不到手机号码的问题
          let sessionData = window.sessionStorage.getItem('loginData')
          let sessionExten = ''
          if (sessionData) {
            sessionData = JSON.parse(sessionData)
            if (sessionData.extenType) {
              sessionExten = sessionData.extenType
              extenType = sessionData.extenType
              this.type = sessionData.extenType
            }
          }
          if (sessionExten && sessionExten === 'Local') {
            return this.$store.state.session.user.mobile
          }
        }
        if (extenType === 'Local') {
          return this.$store.state.session.user.mobile
        } else if (extenType === 'gateway') {
          return this.$t('cti.SipPhone')
        } else if (extenType === 'sip') {
          return this.$t('cti.softPhone')
        }
      },
      extenType () {
        return this.$store.state.cti.globalLet._cti_extenType
      },
      hideCurrentExtenType () { // 登录方式的下拉选项中隐藏当前的登录方式
        let extenType = this.$store.state.cti.globalLet._cti_extenType
        if (!extenType) { // 解决手机方式登录，状态服务器注册不上时，取不到手机号码的问题
          let sessionData = window.sessionStorage.getItem('loginData')
          if (sessionData) {
            sessionData = JSON.parse(sessionData)
            if (sessionData.extenType) {
              extenType = sessionData.extenType
            }
          }
        }
        let extenTypeObj = {'gateway': true, 'sip': true, 'Local': true}
        if (extenType === 'gateway') {
          extenTypeObj.gateway = false
        } else if (extenType === 'sip') {
          extenTypeObj.sip = false
        } else if (extenType === 'Local') {
          extenTypeObj.Local = false
        }
        return extenTypeObj
      }
    // 以下注释的方法已优化成hideCurrentExtenType，稳定后可删除
    //   gateway () {
    //     let extenType = this.$store.state.cti.globalLet._cti_extenType
    //     if (!extenType) { // 解决手机方式登录，状态服务器注册不上时，取不到手机号码的问题
    //       let sessionData = window.sessionStorage.getItem('loginData')
    //       if (sessionData) {
    //         sessionData = JSON.parse(sessionData)
    //         if (sessionData.extenType) {
    //           extenType = sessionData.extenType
    //         }
    //       }
    //     }
    //     return extenType === 'gateway' ? 0 : 1
    //   },
    //   sip () {
    //     let extenType = this.$store.state.cti.globalLet._cti_extenType
    //     if (!extenType) { // 解决手机方式登录，状态服务器注册不上时，取不到手机号码的问题
    //       let sessionData = window.sessionStorage.getItem('loginData')
    //       if (sessionData) {
    //         sessionData = JSON.parse(sessionData)
    //         if (sessionData.extenType) {
    //           extenType = sessionData.extenType
    //         }
    //       }
    //     }
    //     return extenType === 'sip' ? 0 : 1
    //   },
    //   Local () {
    //     let extenType = this.$store.state.cti.globalLet._cti_extenType
    //     if (!extenType) { // 解决手机方式登录，状态服务器注册不上时，取不到手机号码的问题
    //       let sessionData = window.sessionStorage.getItem('loginData')
    //       if (sessionData) {
    //         sessionData = JSON.parse(sessionData)
    //         if (sessionData.extenType) {
    //           extenType = sessionData.extenType
    //         }
    //       }
    //     }
    //     return extenType === 'Local' ? 0 : 1
    //   }
    },
    methods: {
      getStatusRelay () {
        let relay = ''
        let peer = window.phone_peers
        if (peer) {
          let state = peer[this.$store.state.session.user._id]
          if (state) {
            relay = state.status
          }
        }
        if (this.type === 'sip') {
          return relay === undefined ? '(-1)' : ('(' + relay + ')')
        } else if (this.type === 'gateway') {
          return relay === undefined ? '' : ('(' + relay + ')')
        } else {
          return ''
        }
      },
      changeLoginType (command) { // 变更登录方式
        let arr = command.split(',')
        let extenNum = ''
        let users = this.$store.state.session.user
        if (arr[0] === 'gateway') {
          if (users.hasOwnProperty('gatewayLoginWay')) { // 是否允许sip方式登录
            if (users.gatewayLoginWay) {
              if (!this.$store.state.session.user.gatewayExten || this.$store.state.session.user.gatewayExten === '') {
                this.$message.error(this.$t('cti.NotConfigSip'))
                return
              } else {
                extenNum = this.$store.state.session.user.gatewayExten
              }
            } else {
              this.$message.error(this.$t('cti.extenTypeError'))
              return
            }
          } else {
            if (!this.$store.state.session.user.gatewayExten || this.$store.state.session.user.gatewayExten === '') {
              this.$message.error(this.$t('cti.NotConfigSip'))
              return
            } else {
              extenNum = this.$store.state.session.user.gatewayExten
            }
          }
        } else if (arr[0] === 'Local') {
          if (users.hasOwnProperty('localLoginWay')) { // 是否允许手机方式登录
            if (users.localLoginWay) {
              if (!this.$store.state.session.user.mobile || this.$store.state.session.user.mobile === '') {
                this.$message.error(this.$t('cti.LocalNumisNULL'))
                return
              } else {
                extenNum = this.$store.state.session.user.mobileExten
              }
            } else {
              this.$message.error(this.$t('cti.extenTypeError'))
              return
            }
          } else {
            if (!this.$store.state.session.user.mobile || this.$store.state.session.user.mobile === '') {
              this.$message.error(this.$t('cti.LocalNumisNULL'))
              return
            } else {
              extenNum = this.$store.state.session.user.mobileExten
            }
          }
        } else {
          if (users.hasOwnProperty('sipLoginWay')) { // 是否允许在线客服方式登录
            if (users.sipLoginWay) {
              extenNum = this.$store.state.session.user.sipExten
            } else {
              this.$message.error(this.$t('cti.extenTypeError'))
              return
            }
          } else {
            extenNum = this.$store.state.session.user.sipExten
          }
        }
        this.$store.dispatch('phoneSwitchExtenType', {extenType: arr[0], extenNum: extenNum})
      }
    }
  }
</script>
<style scoped lang="stylus">
@import "../../../assets/common.styl"
.el-dropdown
  color $cf-gray1
.el-dropdown,.first-status
  padding 0 10px 0 0
  cursor pointer
  font-size 14px
.icon-ermai
  padding-right 6px
  font-size 24px
  color #808080
  color #808080
.name-status
   font-size 14px
   line-height 52px
.way-ans
  .item
    height 52px
</style>
